<template>
  <div class="equipmentAdmin_box">
    <!-- <dv-loading v-if="dvLoading" v-init-screen-h="0"> 加载中...</dv-loading> -->
    <div class="left">
      <TreeBox @changeCheck="changeCheck" @handleLive5="handleLive5"></TreeBox>
    </div>
    <div class="middle_box">
      <!-- 一区 二区 三区 -->
      <div class="middle_top" v-if="tokenz8 !== '06'">
        <AreaList></AreaList>
        <State></State>
      </div>
      <div class="middle_top" v-else>
        <AreaListZ8></AreaListZ8>
        <StateZ8></StateZ8>
      </div>
      <!-- 零件 -->
      <SpareParts></SpareParts>
    </div>
    <div class="right">
      <Chart :tokens="checkList" ref="chartRef"></Chart>
      <!-- 远程监控 -->
      <WorkmanshipData :tokenz8="tokenz8"></WorkmanshipData>
    </div>
  </div>
</template>

<script>
import AreaListZ8 from "./components/AreaListZ8.vue";
import StateZ8 from "./components/StateZ8.vue";
import AreaList from "./components/AreaList.vue";
import State from "./components/State.vue";
import SpareParts from "./components/SpareParts";
import Chart from "./components/Chart.vue";
import WorkmanshipData from "./components/WorkmanshipData.vue";
import TreeBox from "./components/TreeBox.vue";
import _ from "lodash";
import { getAssignments } from "@/api/assignments";
export default {
  components: {
    AreaListZ8,
    StateZ8,
    TreeBox,
    AreaList,
    State,
    SpareParts,
    Chart,
    WorkmanshipData,
  },

  data() {
    return {
      dvLoading: true,
      tokenz8: "",
      checkList: {},
      chartObj: {},
    };
  },
  methods: {
    getToken(token) {
      return new Promise((resolev, reject) => {
        var params = {
          page: 1,
          pageSize: 300,
          includeDevice: true,
          deviceToken: token,
        };
        getAssignments(params).then((res) => {
          const { results } = res.data;
          if (results.length) {
            resolev(results[0].ideviceAssignment);
          } else {
            this.$msg("当前设备尚未分配");
          }
        });
      });
    },
    async changeCheck(val) {
      const res = await this.getToken(val.token);
      this.checkList = {
        ...val,
        devName: val.name,
        distributionToken: res.token,
        data: [],
      };
      console.log(" this.checkList :>> ", this.checkList);
      // let res = {};
      // if (val.check) {
      //   res = await this.getToken(val.token);
      // }
      // this.chartObj = {
      //   ...val,
      //   distributionToken: res.token,
      // };
      // const index = this.checkList.findIndex((item) => item.id == val.id);
      // if (val.check) {
      //   // if (index == -1) {
      //   //   const res = await this.getToken(val.token);
      //   //   this.checkList.push({
      //   //     ...val,
      //   //     devName: val.name,
      //   //     distributionToken: res.token,
      //   //     data: [],
      //   //   });
      //   // }
      // } else {
      //   // if (index !== -1) {
      //   //   this.checkList.splice(index, 1);
      //   // }
      // }
    },
    handleLive5(data) {
      // 存储设备信息
      this.$store.commit("application/setDivToken", data);
      this.$store.commit("application/setDivTokenZ8", data);
      console.log("data :>> ", data);
      const { token } = data;
      this.tokenz8 = token;
      // 06
      // this.dvLoading = true;
      // this.$refs.chartRef.handleDispose();
      // this.$refs.chartRef.handleCreateConnection();
      // setTimeout(() => {
      //   this.dvLoading = false;
      // }, 1000);
    },
  },
};
</script>

<style lang='scss' scoped>
.equipmentAdmin_box {
  display: flex;
  color: #fff;
  justify-content: space-between;
  height: calc(100vh - 170px) !important;
  padding: 0 10px;
  /deep/ .gutter {
    display: none;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    display: none;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/
    .el-table--scrollable-x
    .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .left {
    width: 20%;
  }
  .right {
    width: 41%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .middle_box {
    width: 37%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .middle_top {
      height: 55%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>